<template>
    <!-- 有扫过书籍信息 -->
    <view v-if="book.length !== 0">
        <!-- 管理按钮 -->
        <view class="button">
            <view class="state" v-if="state">
                <text @click="caozuo">管理</text>
            </view>
            <view class="state" v-else>
                <text @click="deleteBook">移出代售藏书</text>
                <label>
                    <radio color="#C00000" :checked="isFullCheck" @click="changeAllState" /><text>全选</text>
                </label>
            </view>
        </view>
        <!-- 图书展示 -->
        <view class="contain" :style="{minHeight: wh + 'px'}">
            <!-- 开始循环渲染 -->
            <!-- 图书展示盒子 -->
            <view class="book_show" v-for="(book,index) in book" :key="index">
                <view style="display: flex;justify-content: end;width: 100%;">
                    <radio :checked="book.book_state" color="#C00000" @click="radioClickHandler(book)" v-if="!state">
                    </radio>
                </view>
                <!-- 图片 -->
                <image :src="book.book_img"></image>
                <!-- 书名 -->
                <text class="book_name">{{book.book_name}}</text>
                <!-- 回收价 -->
                <view class="book_price">
                    回收价：<text>￥{{book.book_price}}</text>
                </view>
                <!-- 加入卖书清单 -->
                <view>
                    <button @click="addSellList(book)" v-if="book.sell_state === 0">+加入卖书清单</button>
                    <button class="button" v-else-if="book.sell_state === 1">已加入卖书清单</button>
                    <button class="button_02" v-else>暂不回收</button>
                </view>
            </view>
        </view>
    </view>
    <!-- 无数据时 -->
    <view class="empty-cart" v-else>
        <image src="/static/notData.jpg" class="empty-img"></image>
        <text class="tip-text">暂无数据~</text>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'

    export default {
        data() {
            return {
                isFullCheck: '',
                //当前设备可用高度
                wh: 0,
                // 全选状态
                isFullCheck: false,
                // 管理控制
                state: true,
                //卖书清单按钮文字控制
                addlist: true,
                // 单选框选中总数
                count: 0,
            };
        },
        computed: {
            isFullCheck() {
                return this.book.length === this.book.filter(x => x.book_state).length
            },
            ...mapState('sellBookStore', ['book'])
        },
        onLoad() {
            // 获取当前设备系统的信息
            const sysInfo = uni.getSystemInfoSync()
            // 为 wh 窗口可用高度动态赋值
            // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
            this.wh = sysInfo.windowHeight - 40
            this.saveToStorage_book()
            this.saveToStorage_sellbook()
        },
        methods: {
            ...mapMutations('sellBookStore', ['addToCart', 'removeBook', 'saveToStorage_book',
                'saveToStorage_sellbook',
            ]),
            // 点击管理切换页面
            caozuo() {
                this.state = false
            },
            //删除代售藏书
            deleteBook() {
                //删除操作
                this.removeBook()
                //返回管理按钮
                this.state = true
            },
            // 全选按钮的点击事件处理函数
            changeAllState() {
                this.isFullCheck = !this.isFullCheck
                for (let i = 0; i < this.book.length; i++) {
                    this.book[i].book_state = this.isFullCheck
                }
            },
            //单选框点击选择
            radioClickHandler(book) {
                book.book_state = !book.book_state
            },
            // 加入卖书清单
            addSellList(book) {
                this.addToCart(book)
            }
        }
    }
</script>

<style lang="scss">
    // 管理按钮
    .button {
        height: 40px;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #c8c2bd;

        .state {
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 5px;
            text-align: center;
            font-size: 16px;
            padding: 5px;
        }
    }

    // 图书展示
    .contain {
        background-color: #e5dbd0;
        width: 100%;
        height: 100%;
        padding-top: 5px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;

        .book_show {
            width: 26%;
            height: 180px;
            background-color: #F6F1EB;
            padding: 5px;
            border-radius: 3px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin: 7px;

            image {
                width: 80px;
                height: 80px;
                object-fit: cover;
                margin-top: 3px;
                padding-left: 10px;
            }

            .book_name {
                margin-top: 5px;
                text-align: center;
                font-size: 12px;
            }

            .book_price {
                margin-top: 5px;
                text-align: center;
                font-size: 10px;
                margin-bottom: 5px;

                text {
                    color: #00aa00;
                }
            }

            button {
                border: 1px solid #F6F1EB;
                background-color: #00aa00;
                line-height: 26px;
                color: #fff;
                text-align: center;
                height: 26px;
                width: 100px;
                border-radius: 15px;
                font-size: 10px;
                font-weight: 400;
                // margin-bottom: 5px;
            }

            .button {
                background-color: #700d0d;
                color: #00aa00;
                border: none;
            }

            .button_02 {
                background-color: #c8c2bd;
                border: none;
            }
        }
    }

    // 空白数据区域
    .empty-cart {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 150px;

        .empty-img {
            width: 90px;
            height: 90px;
        }

        .tip-text {
            font-size: 12px;
            color: gray;
            margin-top: 15px;
        }
    }
</style>